<template>
    <view class="settled pb-150">
        <Navigation backType="back" title="商家入驻" background="#fff" />
        <view class="bg pb-20">
            <view v-show="curt == 1">
                <view class="pt-20 f jc-c ai-c">
                    <view class="w-48 h-48 b-48 yuan1 f ai-c jc-c"><view class="w-12 h-12 b-12 yuan2"></view></view>
                    <view class="w-180 h-8 heng"></view>
                    <view class="w-36 h-36 b-36 yuan3 f ai-c jc-c fs-24 fw-600 text-color3">2</view>
                    <view class="w-180 h-8 heng bg-heng"></view>
                    <view class="w-36 h-36 b-36 yuan3 f ai-c jc-c fs-24 fw-600 text-color3">3</view>
                </view>
                <view class="f ai-c jc-c mt-16 ph-56">
                    <view class="fs-26 fw-600 text-color4 w-198 f jc-c mr-22">企业信息</view>
                    <view class="fs-26 text-color10 w-198 f jc-c mr-22">经营者信息</view>
                    <view class="fs-26 text-color10 w-198 f jc-c">入驻审核</view>
                </view>
            </view>
            <view v-show="curt == 2">
                <view class="pt-20 f jc-c ai-c">
                    <image src="../../static/select-check.png" class="w-32 h-32"></image>
                    <view class="w-180 h-8 heng"></view>
                    <view class="w-48 h-48 b-48 yuan1 f ai-c jc-c"><view class="w-12 h-12 b-12 yuan2"></view></view>
                    <view class="w-180 h-8 heng bg-heng"></view>
                    <view class="w-36 h-36 b-36 yuan3 f ai-c jc-c fs-24 fw-600 text-color3">3</view>
                </view>
                <view class="f ai-c jc-c mt-16 ph-56">
                    <view class="fs-26 text-color10 w-198 f jc-c mr-22">企业信息</view>
                    <view class="fs-26 text-color4 fw-600 w-198 f jc-c mr-22">经营者信息</view>
                    <view class="fs-26 text-color10 w-198 f jc-c">入驻审核</view>
                </view>
            </view>
        </view>
        <info ref="info" v-show="curt == 1" @fn="chanCurt"/>
        <Operator ref="operator" v-show="curt == 2"  @cf="submit"/>
		<view  v-show="curt == 3">
					                <view class="box">
					                        <u-image src="http://cwht.ricecs.cn/app/gou.png" width="96rpx" height="96rpx"></u-image>
					                        <view class="title">
					                                提交成功
					                        </view>
					                      <!--  <view class="tips">
					                                数据提交失败，信息有误，请重新填写和操作
					                        </view> -->
					                        <view class="btn" @click='toHome'>
					                                <u-button type="info" shape="circle">返回首页</u-button>
					                        </view>
					                </view>
					        </view>
    </view>
</template>
<script setup lang="ts">
import info from './Info.vue';
import Operator from './Operator.vue';
import { ref } from 'vue';
import { merchantCreate } from '@/services/api/mine/index';
import {useAuthStore} from "@/store/modules/auth";

const formData = ref({
	companyName:'',
	generalCreditCode:'',
	companyAddress:'',
	companyType:'个体工商户',
	legalName:'',
	legalIdCard:'',
	licensePictureUrl:'',
	legalIdCardFrontPictureUrl:'',
	legalIdCardBackPictureUrl:'',
  userId:'',
  nickName:'',
  mobile:'',
});
const curt = ref(1);
const authStore = useAuthStore();
const chanCurt = (data:any) => {
	    curt.value=2;
		formData.value.companyName = data.companyName;
		formData.value.companyType = data.companyType;
		formData.value.generalCreditCode = data.generalCreditCode;
		formData.value.companyAddress = data.companyAddress;
		formData.value.licensePictureUrl = data.licensePictureUrl;
	}
	const submit = async (cu:number,data:any)=>{
		if(cu == 1){
			curt.value=1;
			return;
		}
		formData.value.legalName = data.legalName;
		formData.value.legalIdCard = data.legalIdCard;
		formData.value.legalIdCardFrontPictureUrl = data.legalIdCardFrontPictureUrl;
		formData.value.legalIdCardBackPictureUrl = data.legalIdCardBackPictureUrl;
    //读取申请人信息
    await authStore.getUserInfos();
    let user = authStore.getUserInfo
    formData.value.userId = authStore.getUserId;
    formData.value.nickName = user.nickname?user.nickname:user.mobile;
    formData.value.mobile = user.mobile;
    await merchantCreate(formData.value);
		uni.showToast({
		    title: '提交成功',
		});
		curt.value = 3



	}
	function toHome(){
		uni.switchTab({
			url:'/pages/index/index'
		})
	}
</script>
<style lang="scss" scoped>
.settled {
    background: #f5f5f5;
    min-height: 100vh;
    ::v-deep .u-button {
        height: 96rpx !important;
    }
    ::v-deep .u-button__text {
        font-size: 32rpx !important;
        font-weight: 600 !important;
    }
    ::v-deep .u-radio {
        margin-right: 40rpx !important;
    }
    ::v-deep .u-form-item__body {
        padding: 32rpx 0 !important;
    }
    ::v-deep .u-form-item__body__left__content {
        padding-right: 40rpx !important;
    }
    ::v-deep .u-upload__wrap__preview {
        margin: 0 10rpx 10rpx 0 !important;
    }
    ::v-deep .u-upload__wrap__preview:nth-child(4n) {
        margin: 0 0 10rpx 0 !important;
    }

    .heng {
        background: #faf4e9;
    }
    .bg-heng {
        background: #f0f0f0;
    }
    .yuan1 {
        background: #fabb3c;
        border: 8rpx solid #faf4e9;
    }
    .yuan2 {
        background: #ffffff;
    }
    .yuan3 {
        background: #f0f0f0;
    }
    .bg {
        background: #fff;
    }
}
 .box{
			                display: flex;
			                align-items: center;
			                flex-direction: column;
			                padding-top: 230rpx;

			                .title{
			                        margin-top: 32rpx;
			                        font-size: 36rpx;
			                        font-weight: bold;
			                }

			                .tips{
			                        margin-top: 20rpx;
			                        width: 460rpx;
			                        font-size: 28rpx;
			                        color: #222;
			                        text-align: center;
			                }

			                .btn{
			                        margin-top: 32rpx;
			                        width: 200rpx;
			                }
			        }
</style>
